<!-- 我的自选 -->
<template>
  <div class="py-4 container-fluid">
    <div class="mt-4 row">
      <div class="col-12">
        <div class="card">
          <div class="card-header pb-0 d-flex" style="flex-wrap: wrap">
            <h4 class="card-title">Favorites</h4>
            <div
              class="nav-wrapper position-relative ms-auto d-flex align-items-center col-12 col-lg-6 col-xl-5"
            >
              <span class="text-sm me-3">Signal Interval</span>
              <ul
                class="p-1 nav nav-pills nav-fill"
                style="flex: 1"
                role="tablist"
              >
                <li
                  v-for="(item, index) in tabList"
                  :key="index"
                  class="nav-item"
                  style="cursor: pointer"
                  @click="selectTab(item)"
                >
                  <span class="px-0 py-1 mb-0 nav-link active">
                    {{ item }}
                  </span>
                </li>
              </ul>
            </div>
          </div>
          <div class="card-body">
            <el-table
              v-loading="loading"
              :data="tableData"
              header-row-class-name="thead-light text-secondary text-xxs font-weight-bolder opacity-7"
            >
              <el-table-column
                prop="name"
                label="Project"
                min-width="200"
                sortable
              >
                <template #default="{ row }">
                  <div class="d-flex align-items-center">
                    <div style="margin-right: 12px">
                      <img :src="row.image" class="rounded" width="30" />
                    </div>
                    <h6 class="mb-0 text-sm me-2">{{ row.name }}</h6>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="symbol"
                label="Token"
                min-width="90"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop="current_price"
                label="Current Price"
                min-width="120"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop="signal.price"
                label="Signal Price"
                min-width="120"
                sortable
              >
                <template #default="{ row }">
                  <h6 v-if="row.signal.price" class="text-sm mb-0">
                    $ {{ row.signal.price }}
                  </h6>
                </template>
              </el-table-column>
              <el-table-column
                prop="signal.signal"
                label="Action"
                min-width="100"
                sortable
              >
                <template #default="{ row }">
                  <span v-if="row.signal.signal == 1">做多</span>
                  <span v-if="row.signal.signal == 2">平多</span>
                  <span v-if="row.signal.signal == 3">做空</span>
                  <span v-if="row.signal.signal == 4">平空</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="signal.tradetime"
                label="Signal Interval"
                min-width="130"
                sortable
              >
                <template #default="{ row }">
                  <span v-if="row.signal.tradetime == 1">15F</span>
                  <span v-if="row.signal.tradetime == 2">1H</span>
                  <span v-if="row.signal.tradetime == 3">2H</span>
                  <span v-if="row.signal.tradetime == 4">6H</span>
                  <span v-if="row.signal.tradetime == 5">12H</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="signal.operate_time"
                label="Signal Time"
                width="160"
                sortable
              />
              <el-table-column label="15M" width="100" sortable>
                <template #default="{ row }">
                  <div class="form-check form-switch p-0 m-0">
                    <input
                      id="flexSwitchCheckHumidity"
                      class="form-check-input"
                      style="height: 1.25rem"
                      type="checkbox"
                      :checked="row.signal_15F"
                      @click="toggleSwitch(row.project_id, row.signal_15F, '1')"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="1H" width="100" sortable>
                <template #default="{ row }">
                  <div class="form-check form-switch p-0 m-0">
                    <input
                      id="flexSwitchCheckHumidity"
                      class="form-check-input"
                      style="height: 1.25rem"
                      type="checkbox"
                      :checked="row.signal_1H"
                      @click="toggleSwitch(row.project_id, row.signal_1H, '2')"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="2H" width="100" sortable>
                <template #default="{ row }">
                  <div class="form-check form-switch p-0 m-0">
                    <input
                      id="flexSwitchCheckHumidity"
                      class="form-check-input"
                      style="height: 1.25rem"
                      type="checkbox"
                      :checked="row.signal_2H"
                      @click="toggleSwitch(row.project_id, row.signal_2H, '3')"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="6H" width="100" sortable>
                <template #default="{ row }">
                  <div class="form-check form-switch p-0 m-0">
                    <input
                      id="flexSwitchCheckHumidity"
                      class="form-check-input"
                      style="height: 1.25rem"
                      type="checkbox"
                      :checked="row.signal_6H"
                      @click="toggleSwitch(row.project_id, row.signal_6H, '4')"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="12H" width="100" sortable>
                <template #default="{ row }">
                  <div class="form-check form-switch p-0 m-0">
                    <input
                      id="flexSwitchCheckHumidity"
                      class="form-check-input"
                      style="height: 1.25rem"
                      type="checkbox"
                      :checked="row.signal_12H"
                      @click="toggleSwitch(row.project_id, row.signal_12H, '5')"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="Action" width="220">
                <template #default="{ row }">
                  <div>
                    <soft-button
                      class="text-capitalize py-2"
                      variant="gradient"
                      color="secondary"
                      full-width
                      @click="removeProject(row.project_id)"
                      >Remove
                    </soft-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <Notifications />
    </div>
  </div>
</template>

<script>
import {
  projectMyList,
  projectChoosePeriod,
  projectChoose,
} from "@/request/api";
import SoftButton from "@/components/SoftButton.vue";
import setNavPills from "@/assets/js/nav-pills.js";
import Notifications from "./components/notifications.vue";
export default {
  components: {
    SoftButton,
    Notifications,
  },
  data() {
    return {
      tableData: [],
      loading: false,
      timeType: 1,
      page: 1,
      tabList: ["15M", "30M", "1H", "2H", "6H", "12H"],
    };
  },
  created() {
    this.getProjectMyList();
  },
  mounted() {
    setNavPills();
  },
  methods: {
    // 取消自选
    async removeProject(id) {
      let params = {
        project_id: id,
        status: 0,
      };
      await projectChoose(params);
      this.getProjectMyList();
    },
    //切换自选周期
    async toggleSwitch(id, status, type) {
      let params = {
        project_id: id,
        status: status == 0 ? "1" : "0",
        tradetime: type,
      };
      await projectChoosePeriod(params);
      this.getProjectMyList();
    },
    // 切换tab
    selectTab(type) {
      console.log(type);
    },
    // 获取自选列表
    async getProjectMyList() {
      let params = {
        page: this.page,
        pageSize: 10,
      };
      this.loading = true;
      let res = await projectMyList(params);
      this.loading = false;
      this.tableData = res.data;
    },
  },
};
</script>

<style></style>
